<template>
	<view>
		
		<view style='width: 90%;height: 100%;margin: 20rpx auto;'>
			<!-- 左边 -->
			<view style='width: 80%;height: 100%;float: left;'>
				
				<scroll-view
				
				:scroll-top="scrollTop" 
				scroll-y="true"
				:scroll-into-view="toView"
				 class="scroll-Y" 
				@refresherrefresh='refresherrefresh'
				 
				 >
				 
				
				   
				   <view :id='item.id' class="classification" v-for="item in classificationlist" >
				   	<view style="height: 80rpx;line-height: 80rpx;width: 100%;">
				   		<!-- A -->
				   		{{item.title}}
				   	</view>
				   	<view  @click="ficationclick(item)" v-for="(item,index) in item.children[0]"style="border-bottom:1rpx solid #F1F1F1 ;;width: 100%;height: 80rpx;line-height: 80rpx;">
				   		<!-- 鞍山 -->
				   		
				   			
				   			{{item}}
				   	</view>
				   	
				   </view>
				   
				   </scroll-view>
				
				
				
				
			</view>
			
			
			<!-- 右边 -->
				<view  style='width: 20%;height: 100%;float: right;'>
					<view @click="letterclick(item)" v-for="(item,index) in Data" class="Popularclass_right">
						
						{{item}}
					</view>
				</view>
				
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import city from './city.json'
	export default {
		data() {
			return {
				
				scrollTop: 0,
				toView:'D',
				 changeValue:'',
				 
				
				city:city,
				classificationlist:[
					{
						title:' A',
						
						children:[
							"阿拉善",
							"鞍山",
							"安庆",
							"安阳",
							 "阿坝",
							"安顺",
							"阿里",
							"安康",
							"阿克苏",
							"阿勒泰",
							"阿拉尔",
							"澳门"	
						]
							
				
							
								
							
				
						
					}
				],
				//右边字母的数组
				Data:[
					'A',
					'A',
					'A',
					'A',
					'A',
					'A',
				],
			}
		},
		onLoad(option){
			let me =this
			
			me.cityclass()
			// console.log(option.address)
		},
		methods: {
			//点击获取城市名字
			ficationclick(item){
				// console.log(item)
			//向父组件传参数	
		 this.$emit('emitclick',item)
				
			},
			
			
			//右边城市字母
			letterclick(item){
				// console.log(item)
				let me =this
				 me.$emit('letterclick',item)
				me.toView=item
			},
			//点击左边的 城市列表
			cityclass(){ 
				let me =this 
				
				
				let city = me.city
				
				
				//右边字母的数据
				let rightlist=[]
				
				//中间城市数组
				let  classificationres=[]
				
				
			
	
				for(var i in city){
					
					// i 前面的key   后面的值 city[i]
				// console.log(i,':',city[i])
				
				   //右边字母
				    rightlist.push(i)
					//左边城市列表
					classificationres.push({
						title:i,
						children:[city[i]],
						id:i
						
					})
					
					
				}
				
			   //右边字母的数据
				me.Data=rightlist
				//左边城市列表
				me.classificationlist=classificationres
				
				
			},
		}
	}
</script>

<style scoped >
	.scroll-Y{
			height: 1900rpx;
		}
	.classification{
		color: #333333;
		font-size: 38rpx;
		width: 100%;
		
	}
.Popularclass_right{
	width: 100rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	color: #333333;
	font-size: 38rpx;
	margin-top:20rpx;
	
}
</style>
